﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Eight</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <script src="js/Eight.js"></script>

    <!-- Eight references -->
    <link href="/css/default.css" rel="stylesheet" />
    <link href="css/qunitmetro.css" rel="stylesheet" />
    <link href="css/qunitmetro-dark.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="js/lib/qunitmetro.js"></script>

    <!-- Samples -->
    <script src="js/BindingSample.js"></script>

    <!-- Tests -->
    <script src="js/tests/Tests.js"></script>
    <script src="js/tests/Tests.Settings.js"></script>
    <script src="js/tests/Tests.String.js"></script>
    <script src="js/tests/Tests.Logging.js"></script>
    <script src="js/tests/Tests.Queue.js"></script>
    <script src="js/tests/Tests.Message.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Eight.js Tests</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <article id="qunit">
                <header class="win-type-large">Q-Unit</header>
                <div id="Div1"></div>
            </article>

            <article id="message">
                <header class="win-type-large">Messages Functional Tests</header>
                <button onclick="Eight.Message.alertAsync('hey universe!');">alertAsync</button>
                <br />
                <button onclick="Eight.Message.confirmAsync('say hello?');">confirmAsync</button>
                <br />
                <button onclick="Eight.Message.toast('say hello?');">toastText</button>
            </article>

            <article id="network">
                <header class="win-type-large">Network Functional Tests</header>
                <button onclick="Eight.Message.alertAsync('Is Connected? ' + Eight.Network.isConnected());">isConnected</button>
                <br />
                <button onclick="Eight.Message.alertAsync('Has Internets? ' + Eight.Network.hasInternetAccess());">hasInternetAccess</button>
                <br />
                <button onclick="Eight.Message.alertAsync('On Wifi? ' + Eight.Network.isOnWifi());">isOnWifi</button>
                <br />
                <button onclick="Eight.Message.alertAsync('On Ethernet? ' + Eight.Network.isOnEthernet());">isOnEthernet</button>
                <br />
                <button onclick="Eight.Message.alertAsync('Connection Type: ' + Eight.Network.getConnectionLevel());">getConnectionLevel</button>
                <br />
                <button onclick="Eight.Message.alertAsync('Connection Cost: ' + Eight.Network.getConnectionCost());">getConnectionCost</button>
            </article>

            <article id="log">
                <header class="win-type-large">Log Functional Tests</header>
                <button onclick="javascript:throw new Error('test');">[Throw Error]</button>
                <br />
                <button onclick="Eight.Log.show();">show</button>
                <br />
                <button onclick="Eight.Log.clear();">clear</button>
            </article>

            <article id="core">
                <header class="win-type-large">Core Functional Tests</header>
                <button onclick="javascript:Eight.showAppBar();">showAppBar</button>
            </article>

            <article id="settings">
                <header class="win-type-large">Settings Functional Tests</header>
                <button onclick="javascript:Eight.Settings.show();">show</button>
                <br />
                <button onclick="javascript:Eight.Settings.show('help');">show (help page)</button>
            </article>

            <article id="binding">
                <header class="win-type-large">Binding Example</header>
                <label for="fullName">Name: </label><input type="text" id="fullName" data-win-bind="value: name Eight.Binding.TwoWay; onclick: this ViewModel.personClickRouter; style.visibility: isTextboxVisible Eight.Binding.BoolToVisibilityConverter;" />
                <input type="checkbox" id="displayTextbox" title="Display name field" data-win-bind="checked: isTextboxVisible Eight.Binding.TwoWay;" /><label for="displayTextbox">Display name field</label>
                <br />
                <button id="updateFullName">Update Name to 'Red Ferguson'</button>
            </article>
        </section>
    </div>
    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}"></button>
    </div>
</body>
</html>
